<script setup>
import api from './api'
import XEUtils from 'xe-utils'

const props = defineProps({
  url: { type: String, default: '' },
  options: { type: Array, default: () => ([]) },
  data: { type: Array, default: () => ([]) },
  child: { type: Array, default: () => [] },
})
const total = ref({})
if (props.url) {
  api.total(props.url).then(res => {
    total.value = res.data
  })
}
watch(
  () => props.data,
  () => {
    total.value = props.data
  }
)
const getValue = val => {
  if (props.child && XEUtils.isObject(val)) {
    return props.child.map(d => `${d.title}: ${val[d.key]}`).join(' ')
  }
  return val
}
</script>

<template>
  <div class="flex gap-3 text-gray-500">
    <div v-for="(d, i) in options" :key="i">
      <span class="inline-block w-2 h-2 bg-blue-500 rounded-md"></span>
      {{ d.title }}: <span class="text-gray-950">{{ getValue(total[d.key]) }}</span>
    </div>
  </div>
</template>